<template>
  <div class="audioList">
    <list-header :option-list="options" :type="2"></list-header>
    <section>
      <ul class="music">
        <li v-for="music in audioList" :key="music.name">
          <div class="hot">
            <img src="img/heart-music.png" />
            <span>{{ music.hot }}</span>
          </div>
          <div class="name"><span :title="music.name">{{ music.name }}</span></div>
          <div class="singer"><span :title="music.singer">{{ music.singer }}</span></div>
          <div class="album"><span :title="music.album">{{ music.album }}</span></div>
          <div class="duration"><span>{{ music.duration }}</span></div>
        </li>
      </ul>
    </section>
  </div>
</template>

<script>
import ListHeader from "./assistComponents/listHeader.vue";

export default {
  name: "audioList",
  data() {
    return {
      options: [
        { name: "日榜", isActive: true },
        { name: "周榜", isActive: false },
        { name: "月榜", isActive: false }
      ]
    };
  },
  props: {
    audioList: {
      type: Array,
      default: []
    }
  },
  components: {
    ListHeader
  }
};
</script>

<style lang="less" scoped>
.audioList {
  width: 80%;

  section {
    width: 100%;
    height: calc(100% - 30px);
    display: flex;
    justify-content: center;
    margin-top: 8px;

    ul.music {
      height: 100%;
      width: 61%;
      margin: 0 auto;

      li {
        padding: 10px 0 10px 10px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 3px;

        &:hover {
          box-shadow: 1px 1px 8px 1px rgba(0, 0, 0, 0.6);
          // background-color: rgba(46, 204, 113, 0.3);
          // background-color: rgba(52, 152, 219, 0.3);
          cursor: pointer;

          .hot > img {
            animation-name: ani-music-hot-icon;
            animation-duration: 280ms;
            animation-iteration-count: infinite;
            animation-direction: alternate;
          }

          .hot > span {
            animation-name: ani-music-hot-text;
            animation-direction: alternate;
            animation-duration: 280ms;
            animation-iteration-count: 2;
            transform-origin: bottom;
          }
        }

        .hot {
          width: 5%;

          img {
            padding: 3px 5px 0 0;
            float: left;
          }

          span {
            color: #e67e22;
            font-size: 0.8em;
            display: inline-block;
          }
        }
        .name {
          width: 15%;
        }
        .singer {
          width: 15%;
        }
        .album {
          width: 30%;
        }
        .duration {
          width: 8%;
        }
        .name,
        .singer,
        .album,
        .duration {
          overflow: hidden;
          white-space: nowrap;
        }
      }
    }
  }

  @keyframes ani-music-hot-icon {
    to {
      transform: scale(1.8);
    }
  }

  @keyframes ani-music-hot-text {
    0% {
      transform: translateX(0px);
    }
    100% {
      transform: translateX(10px) skewX(-20deg);
      color: #2ecc71;
    }
  }
}
</style>